<template>
  <div class="search-box">
    <form
      id="baidu-form"
      class="form-horizontal"
      method="get"
      :action="searchAction"
      target="_blank"
    >
      <div class="hidden-params">
        <input type="hidden" name="tn" value="baiduimage" />
        <input type="hidden" name="ie" value="utf-8" />
        <input
          type="hidden"
          name="sc"
          value="UWd1pgw-pA7EnHc1FMfqnHRdPH03njnkPWfYPzuW5y99U1Dznzu9m1YznW63rjRLrHmd"
        />
        <input type="hidden" name="ssl_sample" value="s_102" />
        <input type="hidden" name="srcqid" value="3016026224504065595" />
        <input type="hidden" name="f" value="3" />
        <input type="hidden" name="rsp" value="0" />
        <input type="hidden" name="H123Tmp" value="nunew7" />
      </div>

      <a-input-group class="flex-box flex-between">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            {{ searchType }}
            <my-icon type="icon-test3"></my-icon>
          </a>
          <a-menu slot="overlay" @click="handlerChange">
            <a-menu-item
              v-for="(item, index) in menuList"
              :data-name="item.name"
              :data-title="item.title"
              :data-action="item.action"
              :key="index"
              >{{ item.title }}</a-menu-item
            >
            <a-menu-item>
              <a
                class="ant-dropdown-link"
                href="https://www.baidu.com/more/"
                target="_blank"
                >更多 <my-icon type="arrow-double-right"></my-icon>
              </a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>

        <a-avatar
          shape="square"
          :size="28"
          class="img-icon xs-hidden"
          :src="baiduLogo"
        />
        <a-input
          id="searchInput"
          type="text"
          class="flex-1"
          v-on:keyup.enter="handlerSearch"
          size="large"
          :name="searchName"
          placeholder="搜就完了"
          v-focus
        />
        <a-button
          class="ant-input-group-addon ant-btn ant-btn-primary ant-btn-lg"
          type="primary"
          htmlType="submit"
          >百度一下</a-button
        >
      </a-input-group>
    </form>
  </div>
</template>

<script>
const menuList = [
  {
    title: "网页",
    name: "word",
    action: "https://www.baidu.com/s",
  },
  {
    title: "图片",
    name: "word",
    action: "https://image.baidu.com/search/index",
  },
  {
    title: "地图",
    name: "wd",
    action: "https://map.baidu.com/search",
  },
  {
    title: "贴吧",
    name: "kw",
    action: "https://tieba.baidu.com/f",
  },
  {
    title: "知道",
    name: "word",
    action: "https://zhidao.baidu.com/search",
  },
];

export default {
  data() {
    return {
      menuList,
      searchType: "网页",
      searchName: "word",
      searchAction: "https://www.baidu.com/s",
      baiduLogo: require("../../assets/images/baidu.png"),
    };
  },
  methods: {
    handlerChange(data) {
      let dataset = data.item.$el.dataset;
      Object.assign(this, {
        searchType: dataset.title,
        searchName: dataset.name,
        searchAction: dataset.action,
      });
    },
    handlerSearch() {
      document.getElementById("baidu-form").submit();
    },
  },
};
</script>

<style lang="less">
.search-box {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;

  .ant-input-group {
    display: flex;

    &-addon {
      width: unset;
    }

    .ant-dropdown-link {
      color: #777777;
      padding: 0px 12px;
    }

    .img-icon {
      margin: 0 12px;
      cursor: pointer;
    }

    #searchInput {
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      box-shadow: none;
      border: 1px solid;
      border-color: transparent;
      background: rgba(255, 255, 255, 0.5);

      &:focus {
        border-color: #2196f3;
        box-shadow: 0 0 4px rgba(33, 150, 243, 0.4);
        transition: border-color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
      }
    }
  }
}
</style>
